<template>
    <div>




          <el-button type="text" @click="createdbinit">新增数据库</el-button>


          <el-dialog title="新增数据库" :visible.sync="createdbflag">
            <el-form :model="newDb"  refs="dbForm" >



              <el-form-item label="名称" :label-width="formLabelWidth">

                <!--<selectTool :options="cwtype" label="name" @selectedindex="getzipZLBSXLindex"  style="display: inline-block"></selectTool><-->
                <el-input v-model="newDb.dbname" autocomplete="off"></el-input>

              </el-form-item>


              <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="newDb.username" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="newDb.password" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="url" :label-width="formLabelWidth">
                <el-input v-model="newDb.url" autocomplete="off"></el-input>

              </el-form-item>

              <el-form-item label="驱动类" :label-width="formLabelWidth">

                <el-select v-model="newDb.driverClass" placeholder="请选择驱动类">
                  <el-option label="com.mysql.jdbc.Driver" value="com.mysql.jdbc.Driver"></el-option>
                  <el-option label="oracle.jdbc.OracleDriver" value="oracle.jdbc.OracleDriver"></el-option>
                </el-select>



              </el-form-item>

              <el-form-item label="类型" :label-width="formLabelWidth">

                <el-select v-model="newDb.dbtype" placeholder="请选择类型">
                  <el-option label="mysql" value="mysql"></el-option>
                  <el-option label="oracle" value="oracle"></el-option>
                </el-select>

              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="verifyDb">连接测试</el-button>
              <el-button @click="createdbflag = false">取 消</el-button>

              <el-button type="primary" @click="saveNewDb">确 定</el-button>
            </div>
          </el-dialog>


          <el-dialog title="修改数据库" :visible.sync="updatedbflag">
            <el-form :model="updateDb"  refs="dbForm" >

              <!--<el-form-item label="所属项目" :label-width="formLabelWidth">-->


                <!--<selectTool :options="projects" label="name"    @selectedindex="getProjectIndexUpdate"></selectTool>-->

              <!--</el-form-item>-->

              <el-form-item label="名称" :label-width="formLabelWidth">

                <!--<selectTool :options="cwtype" label="name" @selectedindex="getzipZLBSXLindex"  style="display: inline-block"></selectTool><-->
                <el-input v-model="updateDb.dbname" autocomplete="off"></el-input>

              </el-form-item>


              <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="updateDb.username" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="updateDb.password" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="url" :label-width="formLabelWidth">
                <el-input v-model="updateDb.url" autocomplete="off"></el-input>

              </el-form-item>

              <el-form-item label="驱动类" :label-width="formLabelWidth">

                <el-select v-model="updateDb.driverClass" placeholder="请选择驱动类">
                  <el-option label="com.mysql.jdbc.Driver" value="com.mysql.jdbc.Driver"></el-option>
                  <el-option label="oracle.jdbc.OracleDriver" value="oracle.jdbc.OracleDriver"></el-option>
                </el-select>



              </el-form-item>

              <el-form-item label="类型" :label-width="formLabelWidth">

                <el-select v-model="updateDb.dbtype" placeholder="请选择类型">
                  <el-option label="mysql" value="mysql"></el-option>
                  <el-option label="oracle" value="oracle"></el-option>
                </el-select>

              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <!--<el-button @click="verifyDb">取 消</el-button>-->
              <el-button @click="updatedbflag = false">取 消</el-button>

              <el-button type="primary" @click="saveUpdateDb">确 定</el-button>
            </div>
          </el-dialog>


          <div>

            <!--<selectTool :options="projects" label="name"  @selectedindex="getProjectIndex"></selectTool>-->
            <el-form :inline="true" :model="dbSearch" class="demo-form-inline">

              <el-form-item label="数据库名">
                <el-input v-model="dbSearch.dbName" placeholder="数据库名"></el-input>
              </el-form-item>

              <el-form-item label="地址">
                <el-input v-model="dbSearch.url" placeholder="地址"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="searchSubmit">查询</el-button>
              </el-form-item>
            </el-form>

          </div>

          <div>
            <el-table :data="dbs">

              <el-table-column
                prop="dbname"
                label="名称"
              ></el-table-column>

              <el-table-column
                prop="url"
                label="地址"
              ></el-table-column>

              <el-table-column
                prop="username"
                label="帐号"
              ></el-table-column>

              <el-table-column
                prop="password"
                label="密码"
              ></el-table-column>

              <el-table-column
                prop="dbtype"
                label="类型"
              ></el-table-column>

              <el-table-column label="confirm">
                <template slot-scope="{row,index}">
                  <!-- <span v-show="!row.editable" @dblclick="edit(row,index)">{{row.executor}}</span>
                   <el-input v-show="row.editable"  v-model="row.executor.toString()"  ></el-input>-->

                  <el-button type="primary" size="mini" @click="updateFlag(row,index)" >修改</el-button>
                </template>
              </el-table-column>


            </el-table>

          </div>

          <div class="block">

            <el-pagination
              @size-change="pageSizeChange"
              @current-change="pageCurrentChange"
              :current-page="dbSearch.pageNum"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="dbSearch.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dbPage.total">
            </el-pagination>
          </div>









    </div>
</template>

<script>

  import selectTool from '../shuiyoutools/components/selectTool'
  import {getdbs,savedb,updatedb,dbverify,getProject} from '../../api/shuzhiCompare'
  import projectTree from './component/projectTree'
    export default {
        name: "dbmanage",
      watch:{
        filtertext(value){
          console.log(this.$refs)
          this.$refs.projectTree.filter(value)
        }
      },
      components:{
        selectTool,
        projectTree
      },
      data(){
          return{
            filtertext:'',
            defaultProps:{
              children: 'children',
              label: 'name'
            },
            updatedbflag:false,
            createdbflag:false,
            formLabelWidth:'80px',
            newDb:{
              id:0,
              dbname:'',
              projectId:0,
              url:'',
              username:'',
              password:'',
              driverClass:'',
              dbtype:'',
            },
            updateDb:{
              id:0,
              dbname:'',
              projectId:0,
              url:'',
              username:'',
              password:'',
              driverClass:'',
              dbtype:'',
            },

            selectProject:{
              id:0,
              name:''
            },

            dbSearch:{
              pageNum:1,
              pageSize:10,
              dbName:'',
              url:'',
              projectId:0
            },

            dbs:[],
            dbPage:{},

            dbtypes:["mysql","oracle","sqlserver","sqlserver2000"],
            driverClasses:["com.mysql.jdbc.Driver","oracle.jdbc.OracleDriver","com.microsoft.sqlserver.jdbc.SQLServerDriver","net.sourceforge.jtds.jdbc.Driver"],
            projects:[],



          }
      },
      methods:{

        projectChange(value){
          this.dbSearch.projectId = value.id
          // this.selectProjectName = value1.name

          this.selectProject.id = value.id
          this.selectProject.name = value.name
          this.newDb.projectId =value.id

          this.getDbs()


        },

        getCurrentProjectDto(value1,value2){
          this.dbSearch.projectId = value1.id
          // this.selectProjectName = value1.name

          this.selectProject.id = value1.id
          this.selectProject.name = value1.name
          this.newDb.projectId =value1.id

          this.getDbs()

          console.log(value1)
          console.log(value2)



        },

        filterNode(value,data){
          if (!value) return true;
          return data.name.indexOf(value) !== -1;
        },

        createdbinit(){



          this.createdbflag = true
        },

        saveUpdateDb(){
          let that = this
          updatedb(this.updateDb).then(res=>{
            that.updatedbflag=false
            that.getDbs()
          })
        },

        updateFlag(row,index){
          this.updateDb = row
          this.updatedbflag=true

        },

        verifyDb(){
          dbverify(this.newDb).then(res=>{
              this.warn(res.data)
            }
          )
        },

        saveNewDb(){
          let that = this
          savedb(this.newDb).then(res=>{
            that.createdbflag = false
            that.getDbs()
          }).catch(err=>{
            this.warn(err.data)
          })

        },

        pageSizeChange(newpageSize){
            this.dbSearch.pageSize = newpageSize
          this.getDbs()
        },
        pageCurrentChange(newpage){
          this.dbSearch.pageNum = newpage
          this.getDbs()
        },

        searchSubmit(){
          this.getDbs()
        },

        setSearchProject(index){
          this.dbSearch.projectId = this.projects[index].id
        },





        getProjectIndexUpdate(index){
          this.updateDb.projectId = this.projects[index].id
        },




        getDbs(){
          getdbs(this.dbSearch).then(res=>{
             this.dbs = res.data.list
            this.dbPage = res.data
          }).catch(err=>{
            this.warn(err.data)
          })
        },
        warn(message) {
          this.$alert(message, '标题名称', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${ action }`
              });
            }
          });
        },

      },
      mounted(){

          this.getDbs()


      },

    }
</script>

<style scoped>

 .set-eltree-textsize >>> .el-tree-node__label {
   font-size: 20px;
 }


  .set-aside >>>  .el-aside {
    padding: 20px;
    overflow: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-top: 40px;
  }

</style>
